<template>
  <van-nav-bar left-arrow @click-left="back" />
  <div class="login_main">
    <h1>密码登录</h1>
    <van-field v-model="phone" label="+86" placeholder="手机号/邮箱" required />
    <van-cell-group inset>
      <van-field
        v-model="password"
        type="password"
        center
        clearable
        placeholder="请输入密码"
      >
        <template #button>
          <span @click="router.push('/findpassword')">忘记密码？</span>
        </template>
      </van-field>
    </van-cell-group>
    <van-button
      type="warning"
      round
      block
      style="margin: 10px 0; color: #fff"
      @click="login"
      >立即登入</van-button
    >
    <div class="pupop_icon">
      <van-icon name="chat-o" size="24px" @click="router.push('/login')" />
      <van-icon name="notes-o" color="green" size="24px" />
    </div>
    <div class="pupop_agreement">
      <van-checkbox name="a" shape="square" v-model="flag">
        我已阅读并同意
        <span class="orange">《用户协议》《隐私政策》</span>，
      </van-checkbox>
    </div>
  </div>
</template>
    
    <script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import testPhone from "../../components/testPhone";
import { PsswordLoginAPI } from "../../request";
const router = useRouter();
const flag = ref(false);
const phone = ref("");
const password = ref("");
const back = () => {
  router.back();
};
const login = async () => {
  if (!flag.value) {
    showFailToast("请先勾选协议");
    return;
  }
  if (phone.value.indexOf("@") == -1 && !testPhone(phone.value)) return;
  if (password.value == "" || password.value.length < 6) {
    showFailToast("请输入正确密码");
    return;
  }
  let { data } = await PsswordLoginAPI({
    phone: phone.value,
    password: password.value,
  });
  if (data.code == 200) {
    localStorage.setItem('userInfo',JSON.stringify(data.data))
    localStorage.setItem("token", data.token);
    localStorage.setItem("lastLogin", phone.value);
    router.push("/cdn");
  }
};
</script>
  
    
  <style scoped lang='less'>
.login_main {
  padding: 10px 30px;
  box-sizing: border-box;
  h1 {
    margin-bottom: 40px;
  }
  .pupop_icon {
    position: fixed;
    bottom: 15%;
  }
  .pupop_agreement {
    position: fixed;
    bottom: 7%;
  }
  .van-field {
    margin: 10px 0;
    border: 1px solid #fc694f;
    border-radius: 1.5em;
    box-shadow: 0 10px 2px #eee;
  }
  > .van-button {
    border: 1px solid #fc694f;
    border-radius: 1.5em;
    box-shadow: 0 10px 15px #999;
  }
  .van-cell-group {
    margin: 0;
  }
}
.orange {
  color: #fc694f;
}
.agreement {
  width: 80%;
  margin: 0 auto;
}
.pupop_icon {
  width: 80%;
  margin: 15px auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
</style>